<!--
 * @Descripttion: 下单失败列表
 * @version:
 * @Author: 赵致喜
 * @Date: 2020-10-13 16:03:00
 * @LastEditors: 赵致喜
 * @LastEditTime:
-->
<template>
  <div class="bigDiv">
    <div class="control-box">
      <!-- control 操作区 START -->
      <div class="topNav">
		  <e-control :search-form-options="formOptions"
		             :search-label-width="searchLabelWidth"
		             @on-search="searchControlHandle"
		             @on-refresh="refreshControlHandle"
		             @change-height="changeControlHeight"></e-control>
	  </div>
      <!-- control 操作区 END -->
    </div>
    <div class="table-box">
      <!-- table 数据表格 START -->
      <e-table :data="tableData"
               :columns="columns"
               stripe
               border
               :maxHeight="tableMaxHeight"
               style="width: 100%"
               :current="pageData.pageNum"
               :total="pageData.total"
               @page-size-change="changePageSize"
               @page-current-change="changePageCurrent">
	   <template slot-scope="{scope}"
				 slot="interfaceResult"
				 class="scope-box">
				 {{scope.row.message}} |<br>
				{{scope.row.interfaceResult}}
	   </template>
			   
			   
        <template slot-scope="{scope}"
                  slot="message"
                  class="scope-box">
          <el-popover placement="top" trigger="hover" class="scope-box-block">
            <div class="scope-box-block-content">{{scope.row.interfaceResult}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.message}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="operation">
          <el-button @click="openDialog(scope.row)"
                     type="warning"
                     size="mini"
                     plain>查看</el-button>
        </template>
      </e-table>
      <!-- table 数据表格 END -->
    </div>
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog title="基本信息"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="80%">
      <el-row style="margin-bottom:20px">
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">订单名称：</el-col>
          <el-col :span="18">
            <template class="scope-box">
              <el-popover class="scope-box-block" placement="top" trigger="hover">
                <div class="scope-box-block-content">{{orderDetailData.orderName}}</div>
                <p class="scope-box-block-overflow" slot="reference">{{orderDetailData.orderName}}</p>
              </el-popover>
            </template>
          </el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">订单编号：</el-col>
          <el-col :span="18">{{orderDetailData.orderNo}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">要求到货时间：</el-col>
          <el-col :span="18">{{ orderDetailData.sendRemark}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">要求到货地点：</el-col>
          <el-col :span="18">
            <template class="scope-box">
              <el-popover class="scope-box-block" placement="top" trigger="hover">
                <div class="scope-box-block-content">{{orderDetailData.addressDetail}}</div>
                <p class="scope-box-block-overflow" slot="reference">{{orderDetailData.addressDetail}}</p>
              </el-popover>
            </template>
          </el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">支付方式：</el-col>
          <el-col :span="18">{{orderDetailData.paymentName}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">采购人：</el-col>
          <el-col :span="18">{{orderDetailData.purchaseName}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">备注：</el-col>
          <el-col :span="18">
            <template class="scope-box">
              <el-popover class="scope-box-block" placement="top" trigger="hover">
                <div class="scope-box-block-content">{{orderDetailData.orderRemark}}</div>
                <p class="scope-box-block-overflow" slot="reference">{{orderDetailData.orderRemark}}</p>
              </el-popover>
            </template>
          </el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">订单状态：</el-col>
          <el-col :span="18">{{orderDetailData.orderStateName}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">联系人姓名：</el-col>
          <el-col :span="18">{{orderDetailData.consignee}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">联系人手机：</el-col>
          <el-col :span="18">{{orderDetailData.phone}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="6"
                  class="text-right">总金额（元）：</el-col>
          <el-col :span="18">{{orderDetailData.sumBudget}}</el-col>
        </el-col>
<!--        <el-col :span="12"-->
<!--                class="pd5 lineHeight20">-->
<!--          <el-col :span="6"-->
<!--                  class="text-right">订单附件：</el-col>-->
<!--          <el-col :span="18">{{orderDetailData.entrustDocument}}</el-col>-->
<!--        </el-col>-->
      </el-row>
      <h4>订单商品列表</h4>
      <e-table :data="productTableData"
               :columns="columns1"
               stripe
               border
               :page-show="false"
               :maxHeight="tableMaxHeight"
               style="width: 100%">
        <template slot-scope="{scope}"
                  slot="categoryName"
                  class="scope-box">
          <el-popover class="scope-box-block" placement="top" trigger="hover">
            <div class="scope-box-block-content">{{scope.row.categoryName}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.categoryName}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="brandName"
                  class="scope-box">
          <el-popover class="scope-box-block" placement="top" trigger="hover">
            <div class="scope-box-block-content">{{scope.row.brandName}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.brandName}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="typeNo"
                  class="scope-box">
          <el-popover class="scope-box-block" placement="top" trigger="hover">
            <div class="scope-box-block-content">{{scope.row.typeNo}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.typeNo}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="goodsName"
                  class="scope-box">
          <el-popover class="scope-box-block" placement="top" trigger="hover">
            <div class="scope-box-block-content">{{scope.row.goodsName}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.goodsName}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="remark"
                  class="scope-box">
          <el-popover class="scope-box-block" placement="top" trigger="hover">
            <div class="scope-box-block-content">{{scope.row.remark}}</div>
            <p class="scope-box-block-overflow" slot="reference">{{scope.row.remark}}</p>
          </el-popover>
        </template>
      </e-table>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </div>
</template>

<script>
import eControl from '@/components/e-control'
import { getQueryList, getdetailsByOrderId,getOrderDetail } from '@/api/admin.api'
import formOptions from './control'
import moment from 'moment'
import { columns, columns1 } from './columns'
export default {
  name: 'order-failure-list',
  components: {
    eControl
  },
  props: {
  },
  data () {
    return {
      // 表格表头
      columns,
      // 订单购买商品列表
      columns1,
      // 表单配置项
      formOptions,
      // 搜索框label宽度
      searchLabelWidth: '100px',
      // 编辑框是否展示
      editDialogShow: false,
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        current: 1,
        // 分页条数
        size: 10,
        // 数据总数
        total: 0
      },
      // 基本信息数据
      orderDetailData: {},
      // 订单购买商品列表
      productTableData: [],
      // 订单购买分页数据
      productPageData: {
        // 当前分页
        current: 1,
        // 分页条数
        size: 10,
        // 数据总数
        total: 0
      }
    }
  },
  watch: {},
  filters: {
    formeTime (val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
    }
  },
  computed: {
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight - 160
    }
  },
  methods: {
    // 数据初始化
    init () {
      this.getTableData()
    },
    //  查询参数
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    // 重置查询条件
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    // 控制区高度变化
    changeControlHeight (height) {
      this.controlHeight = height
    },
    // 修改分页条数查询
    changePageSize (size) {
      this.pageData.size = size
      this.getTableData()
    },
    // 修改当前分页查询
    changePageCurrent (current) {
      this.pageData.current = current
      this.getTableData()
    },
    // 重置当前分页查询
    refreshPageCurrent () {
      this.pageData.current = 1
      this.getTableData()
    },
    // 获取下载失败列表
    getTableData () {
      const newSearch = { ...this.searchFormData, ...this.pageData }
      getQueryList(newSearch).then(res => {
        const filter = this.$options.filters['formeTime']
        const newArr = []
        res.records.map(item => {
          item.createTime = filter(item.createTime)
		  item.interfaceResult = JSON.parse(item.interfaceResult).desc
          newArr.push(item)
        })
        this.tableData = newArr
        this.pageData.total = res.total
      })
    },
    // 弹窗展示
    openDialog (row) {
      this.editDialogShow = true
      // 委托管理详情
      getOrderDetail(row.fkOrderId).then(res => {
        this.orderDetailData = res
      })
      // 委托购买商品列表
      getdetailsByOrderId(row.fkOrderId).then(res =>{
        this.productTableData = res
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.editDialogType = 0
      this.editDialogShow = false
    }
  },
  created () { },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss">
.control-box {
  margin-bottom: 10px;
}
.text-right {
  text-align: right;
}
.pd5 {
  padding: 5px;
}
.lineHeight20 {
  line-height: 20px;
}
.scope-box {
  width: 100%;
  &-block {
    width: 100%;
    &-content {
      width: 200px;
      min-height: 20px;
      max-height: 200px;
      overflow-y: auto;
    }
    &-overflow {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
      overflow: hidden;
    }
  }
}
.e-search-box .el-row{
	top:0px;
}
</style>
